<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="参考教程：WebGL图像处理 WebGL进一步处理图像 WebGL使用多个纹理 WebGL三维纹理 WebGL数据纹理 WebGL渲染到纹理 现在写博客竟然是来帮自己理清思路">
<meta property="og:type" content="article">
<meta property="og:title" content="【教程学习】WebGL深入纹理">
<meta property="og:url" content="https://huangrenhao.gitee.io/2018/12/24/webgl-parttwo/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="参考教程：WebGL图像处理 WebGL进一步处理图像 WebGL使用多个纹理 WebGL三维纹理 WebGL数据纹理 WebGL渲染到纹理 现在写博客竟然是来帮自己理清思路">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-09-03T08:50:36.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="【教程学习】WebGL深入纹理">
<meta name="twitter:description" content="参考教程：WebGL图像处理 WebGL进一步处理图像 WebGL使用多个纹理 WebGL三维纹理 WebGL数据纹理 WebGL渲染到纹理 现在写博客竟然是来帮自己理清思路">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2018/12/24/webgl-parttwo/">





  <title>【教程学习】WebGL深入纹理 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2018/12/24/webgl-parttwo/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">【教程学习】WebGL深入纹理</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-12-24T16:18:43+08:00">
                2018-12-24
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/WebGL/" itemprop="url" rel="index">
                    <span itemprop="name">WebGL</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2018/12/24/webgl-parttwo/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2018/12/24/webgl-parttwo/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2.8k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  9
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <blockquote>
<p>参考教程：<a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-image-processing.html" target="_blank" rel="noopener">WebGL图像处理</a> <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-image-processing-continued.html" target="_blank" rel="noopener">WebGL进一步处理图像</a> <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-2-textures.html" target="_blank" rel="noopener">WebGL使用多个纹理</a> <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-3d-textures.html" target="_blank" rel="noopener">WebGL三维纹理</a> <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-data-textures.html" target="_blank" rel="noopener">WebGL数据纹理</a> <a href="https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-render-to-texture.html" target="_blank" rel="noopener">WebGL渲染到纹理</a></p>
<p>现在写博客竟然是来帮自己理清思路<a id="more"></a></p>
</blockquote>
<h3 id="什么是纹理"><a href="#什么是纹理" class="headerlink" title="什么是纹理"></a>什么是纹理</h3><p>纹理（Textures），在之前的基础部分有过涉及，就是着色器获取数据的4种方法之一，是一个数据序列，可以在着色程序中运行中随意读取其中的数据，大多数情况下存放的是图像数据。</p>
<h3 id="用纹理绘制图片并对图像进行处理的过程"><a href="#用纹理绘制图片并对图像进行处理的过程" class="headerlink" title="用纹理绘制图片并对图像进行处理的过程"></a>用纹理绘制图片并对图像进行处理的过程</h3><p>在WebGL绘制图片需要使用纹理。纹理的维度必须是2的整数次幂（就是说纹理的高度和宽度都必须是2的n次方大小），就是说图片的像素渲染纹理需要纹理坐标而不是像素坐标，纹理坐标的范围是<strong>0.0-1.0</strong>。纹理坐标 0.0 到 1.0 对应纹理从左到右，0.0 到 1.0 对应第一个像素所在行到最后一行（一般是从下往上）。上下在纹理坐标空间中是没有意义的，因为绘制一些东西后再重定向后， 是没有上下的概念的，主要是依据传递给WebGL的纹理数据，纹理数据的开头对应纹理坐标 0, 0， 结尾对应纹理坐标 1, 1。事实上纹理坐标可以不再这个区间，这个时候就是重复纹理，重复纹理的情况就是纹理坐标在0到1之外的部分的处理，1到2是一份拷贝，-4到-3也是一份拷贝，就是一个完全相同的重复部分。</p>
<p>首先来分析一下绘制图片与绘制一个三角形的不同之处或者说操作上有哪些关键的点。</p>
<ul>
<li><p>绘制一个简单三角形，首先在初始化中构建着色器，然后链接到一个着色程序（或者直接调用<code>webgl-utils.js</code>中的<code>createProgramFromScripts</code>方法编译链接着色器），然后找到在顶点着色器中定义的属性值的位置、创建缓冲、绑定位置信息缓冲、通过绑定点向缓冲中存放数据这一系列方法向着色器提供数据，在渲染中启用对应属性、指定从缓冲中读取数据的方式、运行GLSL着色程序，着色程序就会进行顶点着色器、片段着色器进行渲染三角形。</p>
</li>
<li><p>绘制一张不经任何处理的图片，首先顶点着色器之中除了裁剪空间坐标的属性值还有纹理坐标的属性值，还有用于将纹理坐标传递给片断着色器的可变量（GPU会在这个过程中在点之间进行插值），在片断着色器中寻找纹理上对应的颜色。然后在js之中首先加载一个图像，由于在浏览器中图片的加载是异步的，所以就需要等待纹理的加载，一旦加载完成就开始进行绘制(这里有一个<code>image.onload</code>事件，图片加载完成的时候会执行<code>onload</code>事件)，在绘制（渲染）之中首先和绘制一个简单三角形的部分类似，就是创建编译链接生成着色程序，然后找到顶点着色器定义属性值的位置、创建缓冲、绑定位置信息缓冲，首先绑定的是顶点位置属性，然后就直接设置一个与图像同样大小的矩形区域（坐标采用像素坐标，在顶点着色器中的main方法之中进行相应的转换），紧接着又创建纹理的缓冲、绑定位置信息缓冲，这里直接绑定到了同一个绑定点，然后为矩形提供纹理坐标，再然后创建纹理、设置参数、将图像上传到纹理，之后就是渲染的内容，就是启用对应属性、指定从缓冲中读取数据的方式，这里裁剪坐标属性和纹理坐标属性分别设置了两次，然后运行着色程序即调用<code>gl.drawArrays</code>。</p>
</li>
</ul>
<p>关于是怎么绘制出来的，貌似没有看到具体的细节，只在教程中看到了这么个过程。上面的操作只是将图片展示出，为对图片进行任何的处理。然而可以操作绘制过程中每个像素的操作。对要绘制的图像进行处理的操作，大多数都是在片断着色器中进行操作，因为每绘制一个像素都调用一次片断着色器读取颜色值。这个过程大多都要涉及<code>gl_Fragment</code>和<code>texture2D()</code>方法，<code>gl_Fragment</code>之前有说过就是每个像素调用片断着色器从这个特殊的全局变量之中获取颜色信息，而通过<code>texture2D()</code>方法我们可以得到一个<code>texel</code>（纹素），这是一个纹理图片中的像素。函数的返回值已经考虑了所有在OpenGL程序中定义的纹理设置，比如过滤、mipmap、clamp等，也可以理解为是用来在纹理上找到对应的颜色。通过设置<code>gl_Fragment</code>可以设置不同的颜色效果，比如颜色调换、设置每个像素的颜色值来进行模糊以及各种卷积内核的制作。</p>
<blockquote>
<p>The <a href="https://thebookofshaders.com/glossary/?search=texture2D" target="_blank" rel="noopener">texture2D</a> function returns a texel, i.e. the (color) value of the texture for the given coordinates. The function has one input parameter of the type sampler2D and one input parameter of the type <code>vec2</code> : sampler, the uniform the texture is bound to, and coord, the 2-dimensional coordinates of the texel to look up.</p>
<p>texel：纹理上的像素叫<code>texels</code>，像素是图片元素的简写，<code>texel</code>是纹理元素的简写。</p>
</blockquote>
<h3 id="同时施加多种效果"><a href="#同时施加多种效果" class="headerlink" title="同时施加多种效果"></a>同时施加多种效果</h3><p>方法：使用2个或以上的纹理，然后交替渲染它们。这个过程需要借助帧缓冲实现。WebGL/OpenGL中帧缓冲只是一系列状态（一列附加物），不是任何形式的缓冲，但是当绑定一个纹理之后，可以将渲染结果写入那个纹理。</p>
<h3 id="使用多个纹理加载多个图像"><a href="#使用多个纹理加载多个图像" class="headerlink" title="使用多个纹理加载多个图像"></a>使用多个纹理加载多个图像</h3><p>之前的两个纹理是在js部分创建两个纹理对象绑定到帧缓冲之中，而在片断着色器之中实际上还是只有一个sampler2D类型的纹理，而这里就是定义两个sampler2D类型的纹理。大部分与之前一个纹理部分类似，这里创建一个数组存储两个纹理对象，使用<code>gl.uniform1i()</code>告诉着色器每个取样器使用哪一个纹理单元，然后将纹理单元绑定纹理。</p>
<p>纹理单元：所有的纹理方法可以在“激活的纹理单元”上使用，“激活的纹理单元”就是一个全局变量指向想使用的所有纹理单元。</p>
<h3 id="三维纹理"><a href="#三维纹理" class="headerlink" title="三维纹理"></a>三维纹理</h3><p>三维动画图像加载纹理（最简单的说就是在三维的图形上面的每一个面都加上想要加的纹理图片），采用的方法和二维纹理大致相同，前面的部分都是先在顶点着色器中设置可变量传递纹理坐标给片断着色器，在片断着色器中先声明一个<code>sample2D</code>类型的全局变量（可以让我们用来引用一个纹理），然后利用<code>texture2D()</code>方法和从顶点着色器中传递来的纹理坐标<code>texture2D(u_texture,v_texcood)</code>返回纹理上对应的颜色。在js代码之中也与二维部分的步骤大致相同，就是在设置纹理坐标缓冲的时候有些不一样，无非就是不只是一个面要设置纹理坐标，而是三维图形中想要设置纹理的面都要设置纹理坐标（设置纹理坐标的过程基本上都是按照三角形的方式绘制顶点，矩形的话就绘制两个斜边重合的三角形）。设置纹理坐标也可以只设置一张图片中的所想要设置的部分内容，就是首先获取像素坐标信息，然后将像素坐标转化为纹理坐标。</p>
<p>设置纹理的时候，如果纹理不是2的幂，用<code>gl.generateMipmap()</code>的时候就会显示不出来，这个时候只需要将包裹模式设置为<code>CLAMP_TO_EDGE</code>并且通过设置过滤器为<code>LINEAR</code>or<code>NEAREST</code>来关闭贴图映射。</p>
<h4 id="纹理贴图-mipmap"><a href="#纹理贴图-mipmap" class="headerlink" title="纹理贴图(mipmap)"></a>纹理贴图(mipmap)</h4><p>问题来源：当纹理的像素大于屏幕的像素，就是说假设有个16X16像素的纹理，想要将其绘制在屏幕的2X2个像素上，这四个像素应该是用每个角的8X8的像素的平均值，但是绘制64个像素再求平均在GPU中非常慢，实际采用的做法就是纹理贴图。</p>
<p>纹理贴图就是一个逐渐缩小的图像集合，每一个是前一个的四分之一大小，通常每个子图都是前一级的双线性插值。所以说现在想要将16X16像素的纹理绘制到屏幕的2X2个像素之上，就直接从创建的贴图中找到从之前级别贴图插值出的2X2贴图。</p>
<h4 id="三维中为一个对象设置多个纹理"><a href="#三维中为一个对象设置多个纹理" class="headerlink" title="三维中为一个对象设置多个纹理"></a>三维中为一个对象设置多个纹理</h4><p>简单的说就是给一个立方体的每个面设置不同的图像，最好的方法就是纹理图集的方法，就是将多个图像通过一个纹理提供的方法，从本质上说就相当于将多个图片合成了一张图片一样（实际是把多个图像放到了一个纹理之中），然后为每个面设置相应的纹理坐标，以这样的形式实现了为每个面设置不同的图像。</p>
<h3 id="数据纹理"><a href="#数据纹理" class="headerlink" title="数据纹理"></a>数据纹理</h3><p>创建纹理的方式：</p>
<ul>
<li>从图像中创建纹理</li>
<li>JavaScript创建数据纹理</li>
</ul>
<p>需要注意的就是在webgl数据获取的时候在数据为某些特定大小时速度会快一些(就是说一次拷贝2，4，8个字节比一次拷贝1个字节要快），默认使用4字节长度，就是说在读取我们创建的数据纹理的时候希望每一行数据是多个4字节数据（最后一行除外），可以设置webgl一次处理几个字节。（关于webgl怎么判断一行的数据还是不理解，不是很懂为什么在数据纹理数组中设置的数组的长度有一定的要求）</p>
<h3 id="渲染内容到纹理"><a href="#渲染内容到纹理" class="headerlink" title="渲染内容到纹理"></a>渲染内容到纹理</h3><p>在图像渲染到纹理的部分有涉及到。</p>
<p>主要的步骤：</p>
<ul>
<li><p>创建确定大小的纹理</p>
</li>
<li><p>创建帧缓冲framebuffer并和纹理绑定</p>
<p>帧缓冲只是一个附件集，附件是纹理或者renderbuffers，renderbuffers和纹理很像但是支持纹理不支持的格式和可选项，也不能直接架构renderbuffer提供给着色器。</p>
<p>纹理绑定帧缓冲之后，每次调用<code>gl.clear</code>,<code>gl.drawArrays</code>,<code>gl.drawElements</code>，WebGL都会渲染到纹理上而不是画布上。</p>
</li>
</ul>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/12/20/graduation-thesis-of-undergraduate/" rel="next" title="related work for graduation thesis of undergraduate">
                <i class="fa fa-chevron-left"></i> related work for graduation thesis of undergraduate
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/12/25/opengl/" rel="prev" title="【教程学习】OpenGL">
                【教程学习】OpenGL <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#什么是纹理"><span class="nav-number">1.</span> <span class="nav-text">什么是纹理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#用纹理绘制图片并对图像进行处理的过程"><span class="nav-number">2.</span> <span class="nav-text">用纹理绘制图片并对图像进行处理的过程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#同时施加多种效果"><span class="nav-number">3.</span> <span class="nav-text">同时施加多种效果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用多个纹理加载多个图像"><span class="nav-number">4.</span> <span class="nav-text">使用多个纹理加载多个图像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#三维纹理"><span class="nav-number">5.</span> <span class="nav-text">三维纹理</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#纹理贴图-mipmap"><span class="nav-number">5.1.</span> <span class="nav-text">纹理贴图(mipmap)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#三维中为一个对象设置多个纹理"><span class="nav-number">5.2.</span> <span class="nav-text">三维中为一个对象设置多个纹理</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据纹理"><span class="nav-number">6.</span> <span class="nav-text">数据纹理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#渲染内容到纹理"><span class="nav-number">7.</span> <span class="nav-text">渲染内容到纹理</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
